<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/styles/formbuilder_base.css" type="text/css">
<link rel="stylesheet" href="/styles/formbuilder.css" type="text/css">
  <script type="text/javascript">
    localPath="form"
  </script>
<style>
  * {
    box-sizing: border-box;
  }

  body {
    background-color: #444;
    font-family: sans-serif;
  }

  .fb-main {
    background-color: #fff;
    border-radius: 5px;
    min-height: 600px;
  }

  input[type=text] {
    height: 26px;
    margin-bottom: 3px;
  }

  select {
    margin-bottom: 5px;
    font-size: 40px;
  }
  </style>
<title>表单管理</title>

</head>
<body>
<div class='fb-main'></div>


<script src="/js/formbuilder_base.js"></script>
<script src="/js/formbuilder.js"></script>
<script>
  $(function(){
    fb = new Formbuilder({
      selector: '.fb-main',
      bootstrapData: [
        {
          "label": "姓名",
          "field_type": "text",
          "required": false,
          "field_options": {},
          "cid": "c1"
        },
        {
          "label": "手机号",
          "field_type": "text",
          "required": true,
          "field_options": {},
          "cid": "c6"
        },
        {
          "label": "婚期",
          "field_type": "checkboxes",
          "required": true,
          "field_options": {
              "options": [{
                  "label": "三个月",
                  "checked": false
              }, {
                  "label": "半年",
                  "checked": false
              }, {
                  "label": "一年",
                  "checked": false
              }]
          },
          "cid": "c10"
        }
      ]
    });

    fb.on('save', function(payload){
      console.log(payload);
    })
  });
</script>
</body>
</html>